<template>
  <div class="container">
    <view v-if="counter.isLogin" class="flex alignCenter userInfo">
      <uv-avatar :src="avatarUrl" size="50" @click="setAvatar" mode="aspectFill"></uv-avatar>
      <view class="nickname">
        <uv-input placeholder="请输入昵称" border="none" @blur="setNickName" v-model="counter.ycMpParams.userInfo.nickname" type="nickname"></uv-input>
      </view>
    </view>
    <view v-else class="flex alignCenter userInfo">
      <uv-avatar :src="proxy.$config.defaultAvatar" size="50" @click="setAvatar" mode="aspectFill"></uv-avatar>
      <view class="nickname">
        <uv-button text="请先登录" @click="toLogin"></uv-button>
      </view>
    </view>

    <view class="cellGroup">
      <uv-cell-group :border="false">
        <uv-cell icon="order" title="订单列表" isLink :border="false" @click="toPath('/packagePages/order/list')"></uv-cell>
        <uv-cell icon="account" v-if="!counter.ycMpParams.basicInfo.isOpen" title="个人信息" isLink :border="false" @click="toUser(`/packagePages/user/userInfo`)"></uv-cell>
        <uv-cell icon="integral" title="去上课" isLink :border="false" @click="goClass"></uv-cell>
        <uv-cell icon="setting" title="退出登录" isLink :border="false" @click="logout" v-if="counter.isLogin"></uv-cell>
      </uv-cell-group>
    </view>

    <getPhonePop ref="getPhonePopRef"></getPhonePop>
  </div>
</template>

<script setup lang="ts">
import getPhonePop from "@/components/main/getPhonePop.vue";
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let avatarUrl = computed(() => {
  if (counter.ycMpParams.userInfo && counter.ycMpParams.userInfo.headimgurl) {
    return counter.ycMpParams.userInfo.headimgurl;
  }
  return "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png";
});

//设置昵称
let setNickName = async (e) => {
  if (!e) return;
  await proxy.$apis.getUserInfo({ type: "update", data: { nickname: e } });
  proxy.$utils.showToast("修改成功");
  counter.getUserInfo();
};

async function logout() {
  let resp = await proxy.$utils.showModal({
    content: "确定退出登录吗？",
  });
  if (!resp) return;
  counter.logout();
}

function toLogin() {
  // #ifdef H5
  return counter.toLogin();
  // #endif

  // #ifdef MP-WEIXIN
  return instance.refs.getPhonePopRef.open();
  // #endif
}

async function setAvatar(e) {
  let resp = await proxy.$auth.chooseImage();
  let url = await counter.uploadLafFile(resp[0]);
  await proxy.$apis.getUserInfo({ type: "update", data: { headimgurl: url } });
  proxy.$utils.showToast("修改成功");
  counter.getUserInfo();
}

function toPath(e) {
  if (!counter.isLogin) return toLogin();
  proxy.$utils.toLink(e);
}

async function goClass() {
  if (!counter.isLogin) return toLogin();
  let url = "https://m.study.yacheng-edu.cn";
  let path = await counter.goMoxueyuan();
  proxy.$auth.setClipboardData(path ? path : url, "链接已复制，请在浏览器打开");
}

function toUser(url) {
  if (counter.isLogin) return proxy.$utils.toLink(url);
  proxy.$utils.showToast("您暂未登录,请先登录");
}
</script>



<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  .userInfo {
    padding: 10px 15px;
    background-color: white;
    .nickname {
      margin-left: 10px;
    }
  }
  .cellGroup {
    background-color: white;
    margin-top: 10px;
  }
}
</style>



